$size:15px;
@import 'var';
div {
    color: #58bc58;
    font-size: $size;
  }
  
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
  }
  #btn{
    $size:20px;
    font-size:$fontSize
  }
  .box1 ul {
    width: 100px;
  
    li {
      color: #58bc58;
      font-size: $size;
    }
  }
//   变量用在属性名或者选择器中
$direction:top;
.#{$direction}{
    padding-#{$direction}:50px
}

// 多值变量:数组与对象
// list变量
$padding:10px 20px;
.box{
    padding-#{direction}:nth($padding,1)
}


// map变量
$headings:(h1: 2em, h2: 1.5em, h3: 1.2em);
h1{font-size:map-get($headings,h1)}